<template>
  <div class="page">
    <div style="margin-bottom: 20px">
      <label>题目:</label>
      <a-input
        :size="'large'"
        v-model="searchParams.title"
        :style="{ width: '320px', marginRight: '10px' }"
        placeholder="请输入题目名称"
        allow-clear
      />
      <label>标签:</label>
      <a-input-tag
        :size="'large'"
        v-model="searchParams.tags"
        :style="{ width: '320px' }"
        placeholder="请输入题目的标签"
        allow-clear
      />
      <a-button
        type="primary"
        size="large"
        style="margin-left: 20px"
        @click="loadData"
      >
        搜索
        <template #icon>
          <i class="iconfont icon-sousuo" />
        </template>
      </a-button>
      <a-button
        type="primary"
        size="large"
        status="success"
        style="margin-left: 20px"
        @click="getAllData"
      >
        全部
        <template #icon>
          <i class="iconfont icon-sousuo" />
        </template>
      </a-button>
    </div>
    <a-row>
      <a-col>
        <a-table
          @page-change="selectNext($event)"
          :columns="columns"
          :data="dataList"
          size="large"
          :pagination="pageInfo"
          :bordered="{ cell: true }"
          page-position="bottom"
        >
          <template #tags="{ record }">
            <a-space wrap>
              <a-tag
                v-for="(tag, index) of record.tags"
                :key="index"
                color="blue"
                >{{ tag }}
              </a-tag>
            </a-space>
          </template>
          <template #acceptedRate="{ record }">
            {{
              `${
                record.submitNum
                  ? Math.round((record.acceptedNum / record.submitNum) * 100)
                  : "0"
              }% (${record.acceptedNum}/${record.submitNum})`
            }}
          </template>
          <template #createTime="{ record }">
            {{ moment(record.createTime).format("YYYY-MM-DD") }}
          </template>
          <template #operate="{ record }">
            <a-space>
              <a-button type="primary" @click="toQuestionPage(record)">
                做题
              </a-button>
            </a-space>
          </template>

          <template #money="{ record }">
            <span style="font-size: 15px"
              ><i
                class="iconfont icon-jinbi"
                style="color: #ffc53d; font-size: 20px"
              />{{ record.integral }}</span
            >
          </template>
        </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import {
  QuestionControllerService,
  QuestionQueryRequest,
} from "../../generated";
import message from "@arco-design/web-vue/es/message";
import moment from "moment";
import { useRouter } from "vue-router";
import { useQuestion } from "@/store/question";
import { storeToRefs } from "pinia";

const router = useRouter();
const question = useQuestion();
let { questionId } = storeToRefs(question);

const dataList = ref([]);
const total = ref(0);
const searchParams = ref<QuestionQueryRequest>({
  title: "",
  tags: [],
  pageSize: 8,
  current: 1,
});

const pageInfo = reactive({
  current: 1,
  pageSize: 8,
  total: 0,
});
const loadData = async () => {
  const res = await QuestionControllerService.listQuestionVoByPageUsingPost(
    searchParams.value
  );
  if (res.code === 0) {
    dataList.value = res.data.records;
    pageInfo.total = res.data.total;
  } else {
    message.error("加载失败，" + res.message);
  }
};

loadData();

function selectNext(event: any) {
  searchParams.value.current = event;
  pageInfo.current = event;
  loadData();
}

const columns = [
  {
    title: "题号",
    dataIndex: "id",
    align: "center",
  },
  {
    title: "标题",
    dataIndex: "title",
    align: "center",
  },
  {
    title: "标签",
    slotName: "tags",
    align: "center",
  },
  {
    title: "答题情况",
    slotName: "acceptedRate",
    align: "center",
  },
  {
    title: "创建时间",
    slotName: "createTime",
    align: "center",
  },
  {
    title: "题目积分",
    slotName: "money",
    align: "center",
  },
  {
    title: "操作",
    slotName: "operate",
    align: "center",
  },
];
const toQuestionPage = (record: any) => {
  questionId.value = record.id;
  router.push({
    path: "/submit",
  });
};

const getAllData = () => {
  searchParams.value.tags = [];
  searchParams.value.title = "";
  loadData();
};
</script>

<style scoped>
.page {
  background-color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 1ch;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  min-height: 500px;
}
</style>
